{{define "navbar"}}
<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">Monitor</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
  	  <li {{if .app}}{{if eq .app "genome"}}class="active"{{end}}{{end}}><a href="/stats?app=genome">Genome</a></li>
      <li {{if .app}}{{if eq .app "bx"}}class="active"{{end}}{{end}}><a href="/stats?app=bx">bx</a></li>
      <li {{if .app}}{{if eq .app "rtt"}}class="active"{{end}}{{end}}><a href="/stats?app=rtt">RTT</a></li>
      <li {{if .app}}{{if eq .app "bid"}}class="active"{{end}}{{end}}><a href="/stats?app=bid">Bid</a></li>
      <li {{if .app}}{{if eq .app "adx"}}class="active"{{end}}{{end}}><a href="/stats?app=adx">adx</a></li>
      <li {{if .app}}{{if eq .app "adslog"}}class="active"{{end}}{{end}}><a href="/stats?app=adslog">adslog</a></li>
      <li {{if .isKestrel}}class="active"{{end}}><a href="/kestrel">Kestrel</a></li>
    </ul>

      <ul class="nav navbar-nav navbar-right">
        <li style="margin-top:8px;margin-left:10px"><button id="addKestrel" type="button" class="btn btn-primary">Add</button></li>
        {{if .app}}
        <li style="margin-top:8px;margin-left:10px"><button id="clearStats" type="submit" class="btn btn-primary">Clear</button></li>
        {{end}}
      </ul>

  </div>
</nav>
  <script type="text/javascript">
  $('#clearStats').on('click', function(){
      window.location.href="/clear?app=" + {{.app}};
    });

    var page = {};
    layer.add = function(options){
        options = options || {};
        $.layer({
            type: 1,
            title: 'Add Kestrel',
            offset: [($(window).height() - 290)/2+'px', ''],
            border : [5, 0.5, '#666'],
            area: ['450px','190px'],
            shadeClose: true,
            page: page
        });
    };

    $('#addKestrel').on('click', function(){
      page.url = 'kestrel/add?app=' + {{.app}}
      layer.add();
    });
  </script>
{{end}}